<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

    <!-- 满足有些用户在手机端访问的需要 -->

    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Expires" content="0">

    <title>用户管理</title>
    <!-- 线上环境 -->
    <link rel="stylesheet" href="/static/css/dist/component-min.css">
    <link rel="stylesheet" href="/static/plugins/jbox/jbox-min.css">

    <!--vue-->
    <script src="/static/vue/vue.js"></script>
    <!--element ui-->
    <script src="/static/element/index.js"></script>
    <link rel="stylesheet" href="/static/element/index.css">
    <style>
        .el-table__empty-block {
            height: 0;
        }
        .img-delete:before {
            position: absolute;
            top: -5px;
            color: red;
            margin-left: -15px;
            z-index: 999;
        }
    </style>

</head>
<body class="cp-bodybox">
<div id="app">
    <#include "/common/header-fg.html" />

    <div class="container">
        <div class="inner clearfix">
            <#include "/common/left-menu-fg.html" />

            <div class="content-right">
                <h1 class="content-right-title">添加商品</h1>
                <el-steps :space="300" :active="active" center>
                    <el-step title="选择类目"></el-step>
                    <el-step title="编辑商品信息"></el-step>
                    <el-step title="编辑商品详情"></el-step>
                    <el-step title="编辑商品图片"></el-step>
                </el-steps>
                <div v-if="active === 1">
                    <el-card class="box-card">
                        <el-form ref="activeForm1" :model="activeForm1" :rules="activeRules1" label-width="120px">
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="商品种类">
                                        <el-radio-group v-model="checkedTags"  style="line-height: 36px;">
                                            <el-radio v-for="tag in Tags" :label="tag.value">{{tag.name}}</el-radio>
                                        </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="选择的类目" prop="typeId">
                                        <div class="block">
                                            <el-cascader
                                                    expand-trigger="hover"
                                                    :change-on-select="true"
                                                    :options="typeList"
                                                    v-model="activeForm1.typeId"
                                                    @change="handleChange">
                                            </el-cascader>
                                        </div>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>
                        <div style="text-align: center">
                            <el-button style="margin-top: 12px;" @click="next">下一步</el-button>
                        </div>
                    </el-card>
                </div>
                <div v-if="active === 2">
                    <el-card class="box-card">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">基本信息</span>
                        </div>
                        <el-form ref="itemMessage1" :model="itemMessage" :rules="activeRules2" label-width="80px">
                            <el-form-item label="商品名" prop="name">
                                <el-input v-model="itemMessage.name" style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="标题">
                                <el-input v-model="itemMessage.title"  style="width: 300px"></el-input>
                            </el-form-item>
                            <el-form-item label="描述" prop="desc">
                                <el-input type="textarea" v-model="itemMessage.desc"  style="width: 600px"></el-input>
                            </el-form-item>
                            <el-form-item label="缩略图" prop="thumbnail">
                                <el-row>
                                    <img height="100" v-if="itemMessage.thumbnail !== ''" :src="qiniuUrl + itemMessage.thumbnail">
                                    <i class="el-icon-circle-close img-delete" v-if="itemMessage.thumbnail !== ''" @click="deleteImg(index)">
                                    </i>
                                    <el-upload
                                            :before-upload="beforeUpload"
                                            style="display: inline-block"
                                            :show-file-list="false"
                                            action="/file/upload"
                                            :on-success="uploadSuccess">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-row>
                            </el-form-item>
                        </el-form>
                    </el-card>
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">商品信息</span>
                        </div>
                        <el-form ref="itemMessage2" :model="itemMessage" :rules="activeRules2" label-width="100px" >
                            <el-form-item label="是否限购">
                                <el-switch on-text="" off-text="" v-model="itemMessage.limit" style="margin-top: 8px"></el-switch>
                            </el-form-item>
                            <el-form-item label="限购数量" v-if="itemMessage.limit" prop="limitNumber">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input type="age" v-model.number="itemMessage.limitNumber" style="width: 300px"></el-input>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-input v-model="itemMessage.unit" placeholder="件" style="margin-left: 10px"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="库存">
                                <el-row>
                                    <el-col :span="5">
                                        <el-input v-model="itemMessage.stock" style="width: 300px"></el-input>
                                    </el-col>
                                    <el-col :span="1">
                                        <div style="width: 10px;"></div>
                                    </el-col>
                                    <el-col :span="1">
                                        <el-input v-model="itemMessage.unit" placeholder="件"  style="margin-left: 10px"></el-input>
                                    </el-col>
                                </el-row>
                            </el-form-item>
                            <el-form-item label="警戒库存">
                                <el-input v-model="itemMessage.warningStock" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="原价" prop="initialPrice" v-if="checkedTags === 10">
                                <el-input v-model.number="itemMessage.initialPrice" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="现价" prop="salePrice">
                                <el-input v-model.number="itemMessage.salePrice" style="width:300px;"></el-input>
                            </el-form-item>
                            <el-form-item label="积分兑换数" prop="usePoint">
                                <el-input v-model.number="itemMessage.usePoint" style="width:300px;"></el-input>
                            </el-form-item>
                            <!--<el-form-item label="重量">-->
                                <!--<el-input v-model="itemMessage.weight" style="width:300px;"></el-input>-->
                            <!--</el-form-item>-->
                            <!--<el-form-item label="体积">-->
                                <!--<el-input v-model="itemMessage.volume" style="width:300px;"></el-input>-->
                            <!--</el-form-item>-->
                        </el-form>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px">
                        <el-button @click="previous">上一步</el-button>
                        <el-button type="primary"  @click="next">下一步</el-button>
                    </div>
                </div>
                <div v-if="active === 3">
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">商品属性</span>
                        </div>
                        <template>
                            <el-form :inline="true" ref="itemMessage3" :model="propertyForm" label-width="10px">
                                <el-row :gutter="10" v-for="(item, index) in propertyForm.defaultProperty">
                                    <el-col :span="2">
                                        <el-form-item v-if="item.require" :prop="'defaultProperty.' + index + '.propertyName'"
                                                      :rules="{required: true, message: '属性名不能为空'}">
                                            <el-input v-model='item.propertyName' :disabled='item.require'></el-input>
                                        </el-form-item>
                                        <el-form-item v-else>
                                            <el-input v-model='item.propertyName' :disabled='item.require'></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item v-if="item.require" :prop="'defaultProperty.' + index + '.propertyValueName'"
                                                      :rules="{required: true, message: '属性值不能为空'}">
                                            <el-input  v-model='item.propertyValueName'></el-input>
                                        </el-form-item>
                                        <el-form-item v-else>
                                            <el-input  v-model='item.propertyValueName'></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button @click.native.prevent="removeRow(item)" v-if="!item.require">删除</el-button>
                                    </el-col>
                                </el-row>
                            </el-form>
                            <el-form :inline="true" ref="itemMessage4" :model="propertyForm" label-width="10px">
                                <el-row :gutter="10" v-for="(item, index) in propertyForm.addProperty">
                                    <el-col :span="2">
                                        <el-form-item :prop="'addProperty.' + index + '.propertyName'"
                                                      :rules="{required: true, message: '属性名不能为空'}">
                                            <el-input v-model='item.propertyName' placeholder="属性名"></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="4">
                                        <el-form-item :prop="'addProperty.' + index + '.propertyValueName'"
                                                      :rules="{required: true, message: '属性值不能为空'}">
                                            <el-input  v-model='item.propertyValueName'></el-input>
                                        </el-form-item>
                                    </el-col>
                                    <el-col :span="2">
                                        <el-button @click.prevent="removeDomain(item)">删除</el-button>
                                    </el-col>
                                </el-row>
                                <el-form-item style="margin-left: 160px">
                                    <el-row :span="24">
                                        <el-col :span="24">
                                            <el-button type="primary" @click="addNew">添加</el-button>
                                        </el-col>
                                    </el-row>
                                </el-form-item>
                            </el-form>
                        </template>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px">
                        <el-button @click="previous">上一步</el-button>
                        <el-button type="primary"  @click="next">下一步</el-button>
                    </div>
                </div>
                <div v-if="active === 4">
                    <el-card class="box-card" style="margin-top: 10px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">预览图(4张)</span>
                            <span style="float: right">
                                <el-upload
                                        :before-upload="beforeUpload"
                                        style="display: inline-block"
                                        :show-file-list="false"
                                        action="/file/upload"
                                        :on-success="uploadBannerSuccess">
                                        <el-button type="primary">添加</el-button>
                                </el-upload>
                            </span>
                        </div>
                        <el-table
                                :data="bannerList"
                                border
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    inline-template
                                    label="图片">
                                <div style="padding: 5px 0"><img height="50" v-if="row.picUrl !== ''" :src="qiniuUrl + row.picUrl"></div>
                            </el-table-column>
                            <el-table-column
                                    inline-template
                                    label="创建人">
                                <div>{{user.userName}}</div>
                            </el-table-column>
                            <el-table-column
                                    prop="insertTime"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    inline-template
                                    width="180">
                                <div style="margin-left: -10px">
                                    <el-dropdown>
                                        <el-button size="small" type="primary">
                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native.prevent="exchange($index, 'banner')">上移</el-button></el-dropdown-item>
                                            <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native.prevent="deleteBanner($index)">删除</el-button></el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <el-card style="margin-top: 15px">
                        <div slot="header" class="clearfix">
                            <span style="line-height: 36px;">详情图(4张)</span>
                            <span style="float: right">
                                <el-upload
                                        :before-upload="beforeUpload"
                                        style="display: inline-block"
                                        :show-file-list="false"
                                        action="/file/upload"
                                        :on-success="uploadPicSuccess">
                                        <el-button type="primary">添加</el-button>
                                </el-upload>
                            </span>
                        </div>
                        <el-table
                                :data="pictureList"
                                border
                                style="width: 100%">
                            <el-table-column
                                    type="index"
                                    label="序号"
                                    width="80">
                            </el-table-column>
                            <el-table-column
                                    inline-template
                                    label="图片">
                                <div style="padding: 5px 0"><img height="50" v-if="row.picUrl !== ''" :src="qiniuUrl + row.picUrl"></div>
                            </el-table-column>
                            <el-table-column
                                    inline-template
                                    label="创建人">
                                <div>{{user.userName}}</div>
                            </el-table-column>
                            <el-table-column
                                    prop="insertTime"
                                    label="创建时间">
                            </el-table-column>
                            <el-table-column
                                    align="center"
                                    label="操作"
                                    inline-template
                                    width="180">
                                <div style="margin-left: -10px">
                                    <el-dropdown>
                                        <el-button size="small" type="primary">
                                            操作<i class="el-icon-caret-bottom el-icon--right"></i>
                                        </el-button>
                                        <el-dropdown-menu slot="dropdown" align="center">
                                            <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native.prevent="exchange($index, 'picture')">上移</el-button></el-dropdown-item>
                                            <el-dropdown-item><el-button size="mini" type="primary" class="el-icon-edit" @click.native.prevent="deletePic($index)">删除</el-button></el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </el-table-column>
                        </el-table>
                    </el-card>
                    <div style="text-align: center;margin-top: 10px">
                        <el-button @click="previous">上一步</el-button>
                        <el-button type="primary" @click.native.prevent="save">保存</el-button>
                    </div>
                </div>
            </div>
            <!-- end content-right -->

            <a href="javascript:;" class="btn-leftMenuFold" id="j-btn-leftMenuFold"></a>
        </div>
    </div>
    <!-- end container -->

    <!--gonggao-->

    <!--tip-->
    <div class="footer">© 2017 , Inc. All rights reserved.</div>
    <!-- end footer -->
    <div class="fixedBar" style="right: -78px;">
        <ul>
            <template v-for="(item, index) in leftMenuList">
                <li v-if="index==0" :class="'shopManager' + index + ' cur'"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
                <li v-else :class="'shopManager' + index"><a href="javascript:;" :data-target="'#shop_' + index">{{item.groupName}}</a></li>
            </template>
        </ul>
        <a href="javascript:;" class="fixedBar-btn" id="j-fixedBar-btn"></a>
    </div>
    <a href="#" id="j-gotop" class="gotop" title="回到顶部" style="left: 1920.59px;"></a>

</div>
<script src="/static/js/dist/lib-min.js"></script>
<script src="/static/js/dist/list.js"></script>
<script src="/static/js/dist/component-min.js"></script>

<!-- 引入api -->
<script src="/static/js/api.js"></script>
<script>
    new Vue({
        el: '#app',
        watch: {
            checkedTags: function (val, oldVal) {
                let that = this;
                if (val !== "") {
                    this.options.forEach(function (item) {
                        if (item.value === val) {
                            that.typeList = item.children;
                        }
                    })
                }
            }
        },
        data: function(){
            return {
                activeRules1: {
                    typeId: [
                        {required: true, message: "请选择类目"}
                    ]
                },
                activeRules2: {
                    name: [
                        {required: true, message: "商品名称不能为空"}
                    ],
                    desc: [
                        {required: true, message: "商品描述不能为空"}
                    ],
                    thumbnail: [
                        {required: true, message: "请上传图片"}
                    ],
                    limitNumber: [
                        {required: true, message: "请输入限购数量"},
                        {type: "integer", message: '限购数量必须为整数'}
                    ],
                    initialPrice: [
                        {required: true, message: "请输入原价"},
                        {type: "number", message: '原价必须为数字'}
                    ],
                    salePrice: [
                        {required: true, message: "请输入现价"},
                        {type: "number", message: '现价必须为数字'}
                    ],
                    usePoint: [
                        {required: true, message: "请输入积分兑换数"},
                        {type: "integer", message: '积分兑换数必须为整数'}
                    ]
                },
                user: ${(user)!'null'},
                activeForm1: {
                    typeId: []
                },
                qiniuUrl: list.qiniuUrl,
                active: 1,
                headerNavList: list.headerNavList,
                accountNavList: list.accountNavList,
                leftMenuList: list.menu,
                checkedTags:'',
                Tags: [
                    {
                        name:'商品',
                        value:10
                    },
                    {
                        name: '服务',
                        value:11
                    }
                ],
                type: '',
                bannerList: [],
                typeList: [],
                options: [],
                seq: '',
                propertyForm: {
                    defaultProperty: [],
                    addProperty: []
                },
                pictureList:[],
                itemMessage:{
                    thumbnail: '',
                    name: '',
                    title: '',
                    desc: '',
                    stock: '',
                    unit: '',
                    weight: '',
                    volume: '',
                    limit: false,
                    limitNumber: '',
                    initialPrice: '',
                    salePrice: '',
                    usePoint: ''
                },
                isGetProperty: false
            }
        },
        mounted:function () {
          this.getType();
        },
        methods: {
            handleChange (val) {
                this.type = val.length !== 0 ? val[val.length -1] : "";
            },
            deleteImg () {
                this.itemMessage.thumbnail = "";
            },
            next () {
                let that = this;
                let isValid0 = true;
                let isValid1 = true;
                let isValid2 = true;
                let isValid3 = true;
                let isValid4 = true;
                if (this.active === 1 && this.type === "") {
                    this.$refs.activeForm1.validate(function (valid) {
                        if (!valid) {
                            that.$message.error('请选择类目');
                            isValid0 = false;
                        }
                    })
                }
                if (this.active === 2 && !this.isGetProperty) {
                    this.$refs.itemMessage1.validate(function (valid) {
                        if (!valid) {
                            that.$message.error('请完善基本信息');
                            isValid1 = false;
                        }
                    })
                    this.$refs.itemMessage2.validate(function (valid) {
                        if (!valid) {
                            that.$message.error('请完善商品信息');
                            isValid2 = false;
                        }
                    })
                    this.getProperty();
                }
                if (this.active === 3) {
                    this.$refs.itemMessage3.validate(function (valid) {
                        if (!valid) {
                            this.$message.error('请填写默认属性信息');
                            isValid3 = false;
                        }
                    })
                    this.$refs.itemMessage4.validate(function (valid) {
                        if (!valid) {
                            this.$message.error('请完善属性信息');
                            isValid4 = false;
                        }
                    })
                }
                if (isValid0 && isValid1 && isValid2 && isValid3 && isValid4) {
                    if (this.active++ > 3) this.active = 1;
                }
            },
            previous () {
                if (this.active-- < 1) this.active = 1;
            },
            deletePic (index) {
                this.pictureList.splice(index, 1);
            },
            deleteBanner (index) {
                this.bannerList.splice(index, 1);
            },
            exchange (index, str) {
                if (index !== 0) {
                    return
                }
                if (str === "banner") {
                    this.bannerList[index -1] = this.bannerList.splice(index, 1, this.bannerList[index - 1])[0];
                } else {
                    this.pictureList[index -1] = this.pictureList.splice(index, 1, this.pictureList[index - 1])[0];
                }
            },
            beforeUpload (file) {
                if (file.type === "image/png") {
                    this.imgType = ".png";
                    return true;
                } else if (file.type === "image/jpeg") {
                    this.imgType = ".jpg";
                    return true;
                } else {
                    this.$message.error('上传头像图片只能是 JPG 或 png 格式!');
                    return false;
                }
            },
            uploadSuccess (response, file) {
                if (response.status === 100) {
                    this.itemMessage.thumbnail = response.returnValue[0].id + this.imgType;
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            uploadBannerSuccess (response, file) {
                if (response.status === 100) {
                    let obj = {
                        picUrl: response.returnValue[0].id + this.imgType,
                        type: 1,
                        insertTime: this.getNow()
                    }
                    this.bannerList.push(obj);
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            uploadPicSuccess (response, file) {
                if (response.status === 100) {
                    let obj = {
                        picUrl: response.returnValue[0].id + this.imgType,
                        type: 2,
                        insertTime: this.getNow()
                    }
                    this.pictureList.push(obj);
                } else {
                    this.$alert('上传失败', '提示', {
                        confirmButtonText: '确定',
                    });
                }
            },
            getProperty () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.http("/item/type/property/list", {typeId: this.type}, function (res) {
                    if (res.status === 200) {
                        res.data.list.forEach(function (item) {
                            let obj = {
                                propertyId: item.propertyId,
                                propertyValueName: '',
                                propertyName: item.name,
                                require: item.require === 1 ? true : false
                            }
                            that.propertyForm.defaultProperty.push(obj);
                        })
                        that.isGetProperty = true;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            getType () {
                let that = this;
                let loading = this.$loading({fullscreen: true, lock: true});
                this.$get("/item/type/tree", {}, function (res) {
                    if (res.status === 200) {
                        that.options = res.data.options;
                        that.checkedTags = 10;
                        loading.close();
                    } else {
                        loading.close();
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定',
                        })
                    }
                }, function (res) {
                    loading.close();
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定',
                    })
                })
            },
            addNew(){
                this.propertyForm.addProperty.push({
                    propertyName:'',
                    propertyId:'',
                    propertyValueName:''
                })
            },
            removeDomain(item){
                var index = this.propertyForm.addProperty.indexOf(item)
                if(index !== -1){
                    this.propertyForm.addProperty.splice(index,1)
                }
            },
            removeRow(item){
                var index = this.propertyForm.defaultProperty.indexOf(item)
                if(index !== -1){
                    this.propertyForm.defaultProperty.splice(index,1)
                }
            },
            save(){
                let that = this
                let itemProperties = [];
                let itemPictures = [];
                itemProperties = itemProperties.concat(this.propertyForm.defaultProperty);
                itemProperties = itemProperties.concat(this.propertyForm.addProperty);
                itemPictures = itemPictures.concat(this.bannerList);
                itemPictures = itemPictures.concat(this.pictureList);
                let obj = {
                    thumbnail: this.itemMessage.thumbnail,
                    typeId: this.activeForm1.typeId.length !== 0 ? this.activeForm1.typeId[this.activeForm1.typeId.length -1] : "",
                    itemProperties: itemProperties,
                    itemPictures: itemPictures,
                    name: this.itemMessage.name,
                    title: this.itemMessage.title,
                    desc: this.itemMessage.desc,
                    stock: this.itemMessage.stock,
                    warningStock: this.itemMessage.warningStock,
                    unit: this.itemMessage.unit,
                    limit: this.itemMessage.limit ? 1 : 0,
                    limitNumber: this.itemMessage.limitNumber,
                    initialPrice: this.itemMessage.initialPrice,
                    salePrice: this.itemMessage.salePrice,
                    usePoint: this.itemMessage.usePoint,
                    weight:this.itemMessage.weight ,
                    volume: this.itemMessage.volume
                }
                this.http('/item/insert',obj,function (res) {
                    if(res.status === 200){
                        this.orgList = res.data.list
                        that.$alert('添加成功','提示',{
                            confirmButtonText:'确定',
                            callback: function () {
                                window.location.href = "/item/index";
                            }
                        })
                    }else{
                        that.$alert('服务器错误','提示',{
                            confirmButtonText:'确定'
                        })
                    }
                },function (res) {
                    that.$alert('服务器错误','提示',{
                        confirmButtonText:'确定'
                    })
                })
            }
        }
    })
</script>

<!-- 20170105 --></body>
</html>